<script>
import comMixin from "./comMixin.js";
export default {
  mixins: [comMixin],
  props: {
    type: {
      type: String,
      default: "text",
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    onChange: {
      type: Function,
    },
    onBlur: {
      type: Function,
    },
    onFocus: {
      type: Function,
    },
    onInput: {
      type: Function,
    },
    onClear: {
      type: Function,
    },
    prepend: {},
    append: {},
  },
  methods: {
    nextTick(fn) {
      return () => fn && this.$nextTick(fn);
    },
  },
  render() {
    return (
      <el-input
        class="aoneui-input"
        v-model={this.formData[this.prop]}
        placeholder={this.placeholderSync}
        disabled={this.disabled}
        readonly={this.readonly}
        clearable={this.clearable}
        {...{
          props: {
            "show-password": this.type == "password",
          },
          on: {
            blur: this.nextTick(this.onBlur),
            focus: this.nextTick(this.onFocus),
            change: this.nextTick(this.onChange),
            input: this.nextTick(this.onInput),
            clear: this.nextTick(this.onClear),
          },
        }}
      >
        <template slot="prepend">{this.prepend}</template>
        <template slot="append">{this.append}</template>
      </el-input>
    );
  },
};
</script>
<style lang="scss" scoped>
.aoneui-input {
  /deep/ {
    .el-input__inner {
      height: 32px;
      line-height: 32px;
    }
    .el-input-group__append,
    .el-input-group__prepend {
      padding: 2px;
    }
  }
}
</style>
